<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
    <link rel="icon" type="image/png" href="./assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <!-- Main CSS -->
    <link href="./assets/css/main.css" rel="stylesheet"/>

    <!-- Animation CSS -->
    <link href="./assets/css/vendor/aos.css" rel="stylesheet"/>

</head>

<body>

<!------------------------------------------
NAVBAR:不用改
------------------------------------------->

<!------------------------------------------
HEADER
------------------------------------------->
<div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-primary position-relative">
    <div class="container text-white h-100 tofront">
        <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-10">
                <!-- thymeleaf语法:渲染文章题目 -->
                <h1>大白话告诉你倒排索引是个啥</h1>
            </div>
        </div>
    </div>
</div>



<div class="container  pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center">
        <div class="col-md-8 mt-20">
            <article>
                <!-- 此处渲染标题 -->
                <h1><strong>Bold title</strong> for your paragraph</h1>
<!--                <p th:text="${article.content}">Welcome to BeiJing!</p>-->
                <tbody>
                    <td><div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown" style="margin-bottom: 20px; word-break: break-word; font-family: 微软雅黑, 宋体, Arial; font-size: 15px;"><h3 id="引子" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px;">引子</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">很多搜索引擎都是基于倒排索引，比如luncene，solr以及elasticsearch</p><h3 id="正排索引" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px;">正排索引</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">聊倒排搜索之前先来看看正排索引，正排其实就是数据库表，他通过id和数据进行关联，如下：</p><table style="border: 1px solid rgb(223, 223, 223); word-break: break-word;"><thead><tr><th style="background-color: rgb(250, 250, 250); border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">数据id</th><th style="background-color: rgb(250, 250, 250); border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">数据内容</th></tr></thead><tbody><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">1001</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">苹果公司发布iPhone</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">1002</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">地球引力起源于苹果</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">1003</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">iPhone屏幕碎了</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">1004</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我在苹果商店维修屏幕</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">1005</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我刚刚吃了苹果</td></tr></tbody></table><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">我们可以通过搜索id，来获得相应的数据，也能删除数据。你买了一本书，书的目录其实也是正排搜索。</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">假设现在我要搜<code style="line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; font-family: &quot;Courier New&quot;, sans-serif !important; font-size: 12px !important; background-color: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; padding: 0px 5px !important; border-radius: 3px !important;">苹果</code>俩字，那么他会对这张表格中每一行的数据做匹配，去查找一下，是否包含<code style="line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; font-family: &quot;Courier New&quot;, sans-serif !important; font-size: 12px !important; background-color: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; padding: 0px 5px !important; border-radius: 3px !important;">苹果</code>这两个字，从第一条匹配到最后一条，如果一张表中数据量不多，几万，十几万，那么问题不大，但是一旦数据量有上百万，上千万，那么全表扫描这种的搜索性能就会有影响。</p><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">其次，这个时候我想搜索<code style="line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; font-family: &quot;Courier New&quot;, sans-serif !important; font-size: 12px !important; background-color: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; padding: 0px 5px !important; border-radius: 3px !important;">苹果iPhone</code>，那么我们无法把这词汇拆开再到数据库去搜索。</p><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px;"><li style="list-style-type: disc;">优点：使用起来方便，原理也简单，比较入门</li><li style="list-style-type: disc;">缺点：检索效率低下，适合简单场景使用，比如传统项目，数据量较小的项目。不支持分词搜索。</li></ul><h3 id="倒排索引" style="font-size: 16px; font-weight: bold; line-height: 1.5; margin-top: 10px; margin-right: 0px; margin-left: 0px;">倒排索引</h3><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">与正排是反着来的，他会把文档内容进行分词，比如<code style="line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; font-family: &quot;Courier New&quot;, sans-serif !important; font-size: 12px !important; background-color: rgb(245, 245, 245) !important; border: 1px solid rgb(204, 204, 204) !important; padding: 0px 5px !important; border-radius: 3px !important;">苹果公司发布iPhone</code>是一个文档数据，当我们把他存入到搜索引擎中去的时候，会有一个文档id，这个文档id就类似于数据库主键。但是这文档存储的时候和数据库不一样，他会进行一个分词，参照上面的表格，分词后的结果如下：</p><table style="border: 1px solid rgb(223, 223, 223); word-break: break-word;"><thead><tr><th style="background-color: rgb(250, 250, 250); border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">文档数据</th><th style="background-color: rgb(250, 250, 250); border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">分词结果</th></tr></thead><tbody><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">苹果公司发布iPhone</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">苹果，公司，发布，iPhone</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">地球引力起源于苹果</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">地球，引力，起源，于，苹果</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">iPhone屏幕碎了</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">iPhone，屏幕，碎了</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我在苹果商店维修屏幕</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我，在，苹果，商店，维修，屏幕</td></tr><tr><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我刚刚吃了苹果</td><td style="border: 1px solid rgb(192, 192, 192); border-collapse: collapse; padding: 8px 14px; min-width: 50px;">我，刚刚，吃了，苹果</td></tr></tbody></table><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;">每一个词汇都会和文档id关联起来，可以根据词汇来找到所有出现的id列表，如下：</p><br><p style="margin-top: 10px; margin-right: auto; margin-left: auto; line-height: 24px;"><br></p><ul style="list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 30px; padding: 0px;"><li></li></ul></div></td>
                </tbody>
            </article>
        </div>
    </div>
</div>
<!-- End Main -->
<!--------------------------------------
JAVASCRIPTS:不用改
--------------------------------------->
<!-- CDN 引入vue 和 axios -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>

<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<script type="module">
    import { onMounted, ref } from 'vue'
    import request from '@/utils/request.js'
    defineProps({
        data: {
            type: Array,
            required: true
        }
    })
    //获取数据
    const blogs = ref([])
    const getData = async () => {
        let res = await request({
            url: '/article/2/1',
            method: 'GET'
            //data: { content: '好' }
        })
        console.log('res:', res)
        blogs.value = res.rows
        console.log('blogs', blogs)
    }

    onMounted(() => {
        getData(),
            console.log("'blogs', blogs")
    })
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
    AOS.init({
        disable: function () {
            var maxWidth = 1200;
            return window.innerWidth < maxWidth;
        }
    });
    // $(document).ready(function () {
    //
    //     if(location.href.indexOf("#reloaded")==-1){
    //         location.href=location.href+"#reloaded";
    //         location.reload();
    //     }
    // })
    if (location.href.indexOf("#reloaded") == -1) {
        location.href = location.href + "#reloaded";
        location.reload();
    };
</script>

</body>
</html>